<template>
  <div>
	  <div>
		  <div style="margin:2% 0;display: inline-block;">
			<span>分类标题：</span>
			<el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入分类标题" v-model="title"></el-input>&nbsp;&nbsp;&nbsp;&nbsp
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询</el-button>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置</el-button>
			<el-button size="mini" style="margin-left: 10px;" :disabled="!isAuth('competitionClass:add')" type="primary" icon="document" @click="addNotice">添加分类</el-button>
		  </div>
	  </div>
	  <el-table
		v-loading="tableDataLoading"
	    :data="typeDatas.content"
		row-key="id">
	    <el-table-column
	  	 prop="id"
	  	 label="编号"
	  	 width="80">
	     </el-table-column>
		 <el-table-column
			prop="img"
			label="图片">
				<template slot-scope="scope">
					<img :src="scope.row.img" alt="" width="100" height="50">
				</template>
		  </el-table-column>
	   <el-table-column
	  	prop="title"
	  	label="标题">
	    </el-table-column>
		<el-table-column
			prop="titleName"
			label="副标题"
			width="150">
		 </el-table-column>
		 <el-table-column v-if="form.level === 2"
		   prop="type"
		   label="是否是专属赛事"
		   width="150">
		   <template slot-scope="scope">
		 	<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isVip == 0">否</span>
		     <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isVip == 1">是</span>
		   </template>
		 </el-table-column>
		 <!-- <el-table-column v-if="form.level === 3"
		   prop="type"
		   label="是否开启免费"
		   width="150">
		   <template slot-scope="scope">
		 	<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isVip == 0">否</span>
		     <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isVip == 1">是</span>
		   </template>
		 </el-table-column> -->
		<el-table-column
		  	prop="sort"
		  	label="排序">
		 </el-table-column>
	    <el-table-column
	  	prop="createTime"
	  	label="创建时间">
	    </el-table-column>
	    <el-table-column
	      label="操作"
	  	width="180">
	      <template slot-scope="scope">
	        <el-button
	          size="mini"
	          type="primary"
			  :disabled="!isAuth('competitionClass:update')" 
	          @click="updates(scope.row)">修改
	        </el-button>
	        <el-button
	          size="mini"
	          type="danger"
			   :disabled="!isAuth('competitionClass:delete')"
	          @click="deletes(scope.row)">删除
	        </el-button>
	      </template>
	    </el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[5, 10, 15, 20]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="typeDatas.totalElements">
	    </el-pagination>
	  </div>
	  <!-- 添加分类 -->
	  <el-dialog title="添加分类" :visible.sync="dialogFormVisible" center>
		<div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">标题：</span>
			<el-input style="width:50%;" v-model="title" placeholder="请输入分类标题"></el-input>
		</div>
		<div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">副标题：</span>
			<el-input style="width:50%;" v-model="titleName" placeholder="请输入分类副标题"></el-input>
		</div>
		<div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">是否是专属赛事：</span>
			<el-radio-group v-model="isVip">
			    <el-radio :label="1">开启</el-radio>
			    <el-radio :label="0">关闭</el-radio>
			</el-radio-group>
		</div>
		<!-- <div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">是否是免费赛事：</span>
			<el-radio-group v-model="level">
			    <el-radio :label="3">开启</el-radio>
			    <el-radio :label="2">关闭</el-radio>	
			</el-radio-group>
		</div> -->
		<div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">排序：</span>
			<el-input style="width:50%;" v-model="sort" placeholder="请输入排序号"></el-input>
		</div>
		<div style="margin-bottom: 10px;display:flex;">
			<span style="width: 200px;display: inline-block;text-align: right;">图片：</span>
			<div style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
				<el-upload
					class="avatar-uploader"
					v-model="img"
					action="https://admin.koudaidj.com/game/alioss/upload"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					>
					<img v-if="img" :src="img" class="avatar" style="border-radius: 6px;width: 140px;height: 140px;"/>
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
		</div>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="dialogFormVisible = false">取 消</el-button>
	      <el-button type="primary" @click="releasNoticeTo()">确 定</el-button>
	    </div>
	  </el-dialog>
	  <!-- 修改分类 -->
	  <el-dialog title="修改分类" :visible.sync="dialogFormVisible1" center>
	  	<el-form :model="form">
	  	  <el-form-item label="标题：" :label-width="formLabelWidth" >
	  	    <el-input v-model="form.title" style="width:65%;" placeholder="请输入标题"></el-input>
	  	  </el-form-item>
		  <el-form-item label="副标题：" :label-width="formLabelWidth" >
		    <el-input v-model="form.titleName" style="width:65%;" placeholder="请输入副标题"></el-input>
		  </el-form-item>
		 
		  <el-form-item label="是否是专属赛事：" :label-width="formLabelWidth" >
		   <el-radio-group v-model="form.isVip">
		       <el-radio :label="1">开启</el-radio>
		       <el-radio :label="0">关闭</el-radio>
		   </el-radio-group>
		  </el-form-item>
		  <!-- <el-form-item label="是否为免费赛事：" :label-width="formLabelWidth" >
		   <el-radio-group v-model="form.level">
		       <el-radio :label="3">开启</el-radio>
		       <el-radio :label="2">关闭</el-radio>
		   </el-radio-group>
		  </el-form-item> -->
		  
		  <el-form-item label="排序：" :label-width="formLabelWidth" >
		    <el-input v-model="form.sort" style="width:65%;" placeholder="请输入排序号"></el-input>
		  </el-form-item>
		  <el-form-item label="分类图片：" :label-width="formLabelWidth" >
		  	<div style=" width:140px;height:140px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
		  		<el-upload
		  			class="avatar-uploader"
		  			v-model="form.img"
		  			action="https://admin.koudaidj.com/game/alioss/upload"
		  			:show-file-list="false"
		  			:on-success="handleAvatarSuccess2"
		  			>
		  			<img v-if="form.img" :src="form.img" class="avatar" style="border-radius: 6px;width: 140px;height: 140px;"/>
		  			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		  		</el-upload>
		  	</div>
		  </el-form-item>
	  	</el-form>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
	      <el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
	    </div>
	  </el-dialog>
  </div>
</template>

<script>
	export default {
	    data() {
	      return {
				free:0,
				size:5,
				page:1,
				title:'',
				img:'',
				titleName:'',
				sort:'',
				isVip:0,
				form:{
					id:'',
					title:'',
					img:'',
					titleName:'',
					level:'',
					sort:'',
					isVip:0,
					free:0
				},
				level:0,
				formLabelWidth:'200px',
				tableDataLoading:false,
				dialogFormVisible1:false,
				dialogFormVisible:false,
				typeDatas:[],
			}
		},
		methods: {
			// 图标上传
			handleAvatarSuccess(file) {
			     this.img = file.data;
			},
			// 图标上传
			handleAvatarSuccess2(file) {
			     this.form.img = file.data;
			},
			handleChange(value) {
				this.value.forEach(element => { 
					this.parentId = element;
				});
			},
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
			// 查询
			select(){
				this.page = 1
				this.size = 10
				this.dataSelect()
			},
			// 重置
			cleans(){
				this.title = ''
				this.dataSelect()
			},
			// 添加分类弹框
			addNotice(){
				this.dialogFormVisible = true
			},
			// 添加分类
			releasNoticeTo(){
				if (this.title == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入分类名称',
				        type: 'warning'
				    });
				    return
				}
				// if (this.level === 0) {
				// 	this.$notify({
				// 	    title: '提示',
				// 	    duration: 1800,
				// 	    message: '是否开启免费赛事',
				// 	    type: 'warning'
				// 	});
				// 	return
				// }
				if (this.level === 3 && this.isVip === 1 ) {
					//this.isVip = 0
					this.$notify({
					    title: '提示',
					    duration: 1800,
					    message: '免费赛事不能开启专属',
					    type: 'warning'
					});
					return
				}
				
				if (this.titleName == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入副标题',
				        type: 'warning'
				    });
				    return
				}
				if (this.sort == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入排序号',
				        type: 'warning'
				    });
				    return
				}
				if (this.img == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请上传分类图片',
				        type: 'warning'
				    });
				    return
				}
				this.$http({
				  url: this.$http.adornUrl2('/gameEventType/save'),
				  method: 'post',
				  data: this.$http.adornData({
					'title':this.title,
					'titleName':this.titleName,
					'sort':this.sort,
					'level':this.level,
					'isVip':this.isVip,
					'img':this.img
				  })
				}).then(({data}) => {
					this.dialogFormVisible = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						this.title = ''
						this.titleName = ''
						this.sort = ''
						this.img = ''
						this.level = 0
						this.dataSelect()
				      }
				    })
				})
			},
			// 修改弹框
			updates(rows){
				this.dialogFormVisible1=true;
				this.form.id = rows.id;
				this.form.title = rows.title;
				this.form.createTime = rows.createTime;
				this.form.titleName = rows.titleName
				this.form.level = rows.level
				this.form.isVip = rows.isVip
				this.form.img = rows.img
				this.form.sort = rows.sort
			},
			// 修改商品类别
			amendNoticeTo(){
				if (this.form.title == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入标题',
				        type: 'warning'
				    });
				    return
				}
				if (this.form.titleName == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入副标题',
				        type: 'warning'
				    });
				    return
				}
				if (this.form.level === 3 && this.form.isVip === 1 ) {
					//this.isVip = 0
					this.$notify({
					    title: '提示',
					    duration: 1800,
					    message: '免费赛事不能开启专属',
					    type: 'warning'
					});
					return
				}
				if (this.form.sort === '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入排序号',
				        type: 'warning'
				    });
				    return
				}
				if (this.form.img == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请上传分类图片',
				        type: 'warning'
				    });
				    return
				}
				this.$http({
				  url: this.$http.adornUrl2('/gameEventType/update'),
				  method: 'post',
				  data: this.$http.adornData({
					'id':this.form.id,
					'title':this.form.title,
					'titleName':this.form.titleName,
					'sort':this.form.sort,
					'level':this.form.level,
					'img':this.form.img,
					'isVip':this.form.isVip,
					'createTime':this.form.createTime,
				  })
				}).then(({data}) => {
					this.dialogFormVisible1 = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						  this.dataSelect()
				      }
				    })
				})
			},
			// 删除分类
			deletes(row){
				this.$confirm(`确定删除此条信息?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
					url: this.$http.adornUrl2('/gameEventType/delete'),
					method: 'get',
					params: this.$http.adornParams({
						'id':row.id
					})
				  }).then(({data}) => {
					  this.$message({
						message: '删除成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						  this.dataSelect()
						}
					  })
				  })
				}).catch(() => {})		
			},
			// 获取分类数据
			dataSelect () {
			  let page = this.page - 1
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/gameEventType/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page':page,
					'size':this.size,
					'title':this.title,
					'level':this.level
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					//console.log(data)
					this.typeDatas = returnData
			  })
			}
		},
		mounted() {
			this.dataSelect()
		}
	  };
</script>

<style>
	
</style>
